<!-- 团队介绍模块 -->
<section id="team" class="py-16 bg-white">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
        <?= $data['content']['sectionBadge']?>
      </div>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
        <?= $data['content']['sectionTitle']?>
      </h2>
      <p class="text-dark/70">
        <?= $data['content']['sectionSubtitle']?>
      </p>
    </div>
    
    <!-- 团队成员 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
      <?php foreach ($data['content']['members'] as $member): ?>
      <div class="text-center">
        <div class="relative mb-4">
          <img src="<?= $member['avatar'] ?>" alt="<?= $member['name'] ?>" class="w-full h-80 object-cover rounded-2xl">
          <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4 rounded-b-2xl">
            <div class="flex justify-center space-x-3">
              <?php if (isset($member['socialLinks'])): ?>
                <?php foreach ($member['socialLinks'] as $link): ?>
                  <?php if ($link['platform'] === 'linkedin'): ?>
                    <a href="<?= $link['url'] ?>" class="text-white hover:text-primary transition duration-300" target="_blank">
                      <i class="fa fa-linkedin"></i>
                    </a>
                  <?php elseif ($link['platform'] === 'weixin'): ?>
                    <a href="<?= $link['url'] ?>" class="text-white hover:text-primary transition duration-300">
                      <i class="fa fa-weixin"></i>
                    </a>
                  <?php elseif ($link['platform'] === 'github'): ?>
                    <a href="<?= $link['url'] ?>" class="text-white hover:text-primary transition duration-300" target="_blank">
                      <i class="fa fa-github"></i>
                    </a>
                  <?php elseif ($link['platform'] === 'weibo'): ?>
                    <a href="<?= $link['url'] ?>" class="text-white hover:text-primary transition duration-300" target="_blank">
                      <i class="fa fa-weibo"></i>
                    </a>
                  <?php endif; ?>
                <?php endforeach; ?>
              <?php endif; ?>
            </div>
          </div>
        </div>
        <h3 class="text-lg font-bold mb-1"><?= $member['name'] ?></h3>
        <p class="text-primary mb-2"><?= $member['position'] ?></p>
        <p class="text-dark/70 text-sm">
          <?= $member['background'] ?>
        </p>
        <?php if (isset($member['responsibilities']) && !empty($member['responsibilities'])): ?>
          <div class="mt-3">
            <p class="text-dark/80 text-xs mb-1">职责范围:</p>
            <div class="flex flex-wrap justify-center gap-1">
              <?php foreach ($member['responsibilities'] as $responsibility): ?>
                <span class="px-2 py-1 bg-gray-100 text-dark/60 text-xs rounded">
                  <?= $responsibility ?>
                </span>
              <?php endforeach; ?>
            </div>
          </div>
        <?php endif; ?>
      </div>
      <?php endforeach; ?>
    </div>
    
    <!-- 团队数据统计 -->
    <?php if (isset($data['content']['teamStats']) && $data['content']['teamStats']['enabled']): ?>
    <div class="mt-24 bg-primary/5 p-8 rounded-2xl">
      <div class="text-center mb-12">
        <h3 class="text-2xl font-bold mb-2"><?= $data['content']['teamStats']['title'] ?></h3>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
        <?php foreach ($data['content']['teamStats']['items'] as $stat): ?>
        <div class="text-center">
          <div class="text-3xl font-bold text-primary mb-2"><?= $stat['value'] ?></div>
          <p class="text-dark/70"><?= $stat['label'] ?></p>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <?php endif; ?>
    
    <!-- 加入我们按钮 -->
    <?php if (isset($data['content']['joinUsButton'])): ?>
    <div class="mt-12 text-center">
      <a href="<?= $data['content']['joinUsButton']['href'] ?>" class="inline-flex items-center px-6 py-3 bg-primary text-white font-medium rounded-full hover:bg-primary/90 transition duration-300">
        <?= $data['content']['joinUsButton']['text'] ?>
        <i class="fa fa-arrow-right ml-2"></i>
      </a>
    </div>
    <?php endif; ?>
    
    <!-- 公司文化 -->
      <?php if (isset($data['content']['companyCulture']) && $data['content']['companyCulture']['enabled']): ?>
      <div class="mt-24">
        <div class="text-center max-w-2xl mx-auto mb-16">
          <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
            <?= $data['content']['companyCulture']['badge']?>
          </div>
          <h3 class="text-2xl font-bold mb-4"><?= $data['content']['companyCulture']['title'] ?></h3>
          <p class="text-dark/70">
            <?= $data['content']['companyCulture']['subtitle']?>
          </p>
        </div>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          <?php foreach ($data['content']['companyCulture']['items'] as $culture): ?>
          <div class="bg-light p-6 rounded-2xl">
            <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary mb-4">
              <i class="fa <?= $culture['icon'] ?>"></i>
            </div>
            <h4 class="text-lg font-bold mb-2"><?= $culture['title'] ?></h4>
            <p class="text-dark/70 text-sm">
              <?= $culture['description'] ?>
            </p>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <?php endif; ?>
  </div>
</section>